<template>
  <up-navbar title="申请提交" bgColor="transparent" @leftClick="goIndex">
  </up-navbar>
  <img class="bg" src="../../static/bg.png" alt="" />
  <img src="../../static/bigIcon.png" alt="" class="bigIcon" />
  <div class="topSitting">头部占位</div>
  <div class="submitBtns">
    <div class="btnItem">
      <div class="itemIcon">
        <img
          src="../../static//shenfenrenzhen_icon.png"
          alt=""
          class="img"
        />
      </div>
      <div class="itemText">身份认证</div>
    </div>
    <div class="btnItem">
      <div class="itemIcon">
        <img
          src="../../static//renlianshibie_icon.png"
          alt=""
          class="img"
        />
      </div>
      <div class="itemText">人脸识别</div>
    </div>
    <div class="btnItem">
      <div class="itemIcon">
        <img
          src="../../static//tijiaoshengqing_icon.png"
          alt=""
          class="img"
        />
      </div>
      <div class="itemText">提交申请</div>
    </div>
  </div>
  <div class="mainBody">
    <img
      src="../../static/daikuanshenqingtijiao_bg.png"
      alt=""
      class="mainBg"
    />
    <img
      src="../../static/daikuantijiao_icon.png"
      alt=""
      class="mainIcon"
      v-if="!param.isGetResult"
    />
    <div class="loanLimit" v-if="param.isGetResult">
      <img
        src="../../static/shouxingedu.png"
        alt=""
        class="bg"
      />
      <div class="loanTitle">预授信额度（元）</div>
      <div class="loanLimit">{{param.loanNum}}</div>
    </div>
    <div class="mianTitle" v-if="!param.isGetResult">贷款申请已提交</div>
    <div class="mainTips" v-if="!param.isGetResult">
      尊敬的客户：<br />您的贷款申请已提交，请耐心等待审批结果。稍后您可以通过“贷款查询”功能查询本贷款申请审批结果
    </div>
    <div class="mainTips" v-if="param.isGetResult">
      本页面预授信额度仅供参考，最终结果以贷款审批为准，我行会安排人员尽快与您联系，请关注96669来电：本行产品不收取任何中介费，请知悉。
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
// 是否获取到结果
let param = reactive({
  isGetResult:false,
  loanNum:0
});
import { onLoad } from "@dcloudio/uni-app";
onLoad((options) => {
  let params = JSON.parse(options.value);
  param.isGetResult = params.isgetResult
  if(params.isgetResult){
    param.loanNum = params.finaLoanAmount;
  }
});
const goIndex = () => {
  wx.switchTab({
    url: "../../pages/index/index",
  });
};
</script>

<style scoped lang="scss">
.mainBody {
  width: 700rpx;
  height: 860rpx;
  margin: 0 25rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .mainBg {
    width: 100%;
    height: 860rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -999;
  }
  .mainIcon {
    width: 230rpx;
    height: 171rpx;
    margin-bottom: 25rpx;
  }
  .mianTitle {
    color: #333333;
    text-align: center;
    height: 45rpx;
    line-height: 45rpx;
    font-size: 32rpx;
    margin-bottom: 54rpx;
    font-weight: 600;
  }
  .mainTips {
    width: 586rpx;
    line-height: 42rpx;
  }
  .loanLimit {
    width: 448rpx;
    height: 325rpx;
    margin-bottom: 29rpx;
    position: relative;
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 448rpx;
      height: 325rpx;
      z-index: -99;
    }
    .loanTitle {
      width: 100%;
      font-size: 28rpx;
      text-align: center;
      position: absolute;
      text-align: center;
      top: 117rpx;
    }
    .loanLimit {
      height: 126rpx;
      line-height: 126rpx;
      color: #4d79dd;
      font-size: 90rpx;
      text-align: center;
      position: absolute;
      top: 167rpx;
    }
  }
}
.bg {
  width: 100%;
  height: 873rpx;
  position: absolute;
  z-index: -9999;
  left: 0;
  top: 0;
}
.bigIcon {
  width: 148rpx;
  height: 115rpx;
  position: absolute;
  z-index: -999;
  left: 533rpx;
  top: 140rpx;
}
.topSitting {
  height: 241rpx;
  opacity: 0;
}
.submitBtns {
  height: 150rpx;
  margin: 0 28rpx;
  margin-bottom: 30rpx;
  padding: 21rpx 80rpx;
  background-color: #fff;
  opacity: 0.85;
  border-radius: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btnItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 7rpx;
    .itemIcon {
      width: 69rpx;
      height: 68rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
